<template>
    <div>
        <div class="pageHeaderContent">
            <div class="avatar">
                <a-avatar size="large" :src="currentUser.avatar" />
            </div>
            <div class="content">
                <div class="contentTitle">
                    早安，
                    {{ currentUser.name }}
                    ，祝你开心每一天！
                </div>
                <div>{{ currentUser.title }} |{{ currentUser.group }}</div>
            </div>
            <div class="extraContent">
                <div class="statItem">
                    <a-statistic title="项目数" :value="56" />
                </div>
                <div class="statItem">
                    <a-statistic title="团队内排名" :value="8" suffix="/ 24" />
                </div>
                <div class="statItem">
                    <a-statistic title="项目访问" :value="2223" />
                </div>
            </div>
        </div>

        <div style="padding: 10px">
            <a-row :gutter="24">
                <a-col :xl="16" :lg="24" :md="24" :sm="24" :xs="24">
                    <a-card
                        class="projectList"
                        :style="{ marginBottom: '24px' }"
                        title="进行中的项目"
                        :bordered="false"
                        :loading="false"
                        :body-style="{ padding: 0 }"
                    >
                        <template #extra>
                            <a href="">
                                <span style="color: #1890ff">全部项目</span>
                            </a>
                        </template>
                        <a-card-grid
                            v-for="item in projectNotice"
                            :key="item.id"
                            class="projectGrid"
                        >
                            <a-card
                                :body-style="{ padding: 0 }"
                                style="box-shadow: none"
                                :bordered="false"
                            >
                                <a-card-meta
                                    :description="item.description"
                                    class="w-full"
                                >
                                    <template #title>
                                        <div class="cardTitle">
                                            <a-avatar
                                                size="small"
                                                :src="item.logo"
                                            />
                                            <a :href="item.href">
                                                {{ item.title }}
                                            </a>
                                        </div>
                                    </template>
                                </a-card-meta>
                                <div class="projectItemContent">
                                    <a :href="item.memberLink">
                                        {{ item.member || '' }}
                                    </a>
                                    <span
                                        class="datetime"
                                        ml-2
                                        :title="item.updatedAt"
                                    >
                                        {{ item.updatedAt }}
                                    </span>
                                </div>
                            </a-card>
                        </a-card-grid>
                    </a-card>
                    <a-card
                        :body-style="{ padding: 0 }"
                        :bordered="false"
                        class="activeCard"
                        title="动态"
                        :loading="false"
                    >
                        <a-list
                            :data-source="activities"
                            class="activitiesList"
                        >
                            <template #renderItem="{ item }">
                                <a-list-item :key="item.id">
                                    <a-list-item-meta>
                                        <template #title>
                                            <span>
                                                <a class="username">{{
                                                    item.user.name
                                                }}</a
                                                >&nbsp;
                                                <span class="event">
                                                    <span>{{
                                                        item.template1
                                                    }}</span
                                                    >&nbsp;
                                                    <a
                                                        href=""
                                                        style="color: #1890ff"
                                                    >
                                                        {{
                                                            item?.group?.name
                                                        }} </a
                                                    >&nbsp;
                                                    <span>{{
                                                        item.template2
                                                    }}</span
                                                    >&nbsp;
                                                    <a
                                                        href=""
                                                        style="color: #1890ff"
                                                    >
                                                        {{
                                                            item?.project?.name
                                                        }}
                                                    </a>
                                                </span>
                                            </span>
                                        </template>
                                        <template #avatar>
                                            <a-avatar :src="item.user.avatar" />
                                        </template>
                                        <template #description>
                                            <span
                                                class="datetime"
                                                :title="item.updatedAt"
                                            >
                                                {{ item.updatedAt }}
                                            </span>
                                        </template>
                                    </a-list-item-meta>
                                </a-list-item>
                            </template>
                        </a-list>
                    </a-card>
                </a-col>
                <a-col :xl="8" :lg="24" :md="24" :sm="24" :xs="24">
                    <a-card
                        :style="{ marginBottom: '24px' }"
                        title="快速开始 / 便捷导航"
                        :bordered="false"
                        :body-style="{ padding: 0 }"
                    >
                        <EditableLinkGroup />
                    </a-card>
                    <a-card
                        :style="{ marginBottom: '24px' }"
                        :bordered="false"
                        title="XX 指数"
                    >
                        <div class="chart">
                            <div ref="radarContainer" />
                        </div>
                    </a-card>
                    <a-card
                        :body-style="{
                            paddingTop: '12px',
                            paddingBottom: '12px'
                        }"
                        :bordered="false"
                        title="团队"
                    >
                        <div class="members">
                            <a-row :gutter="48">
                                <a-col
                                    v-for="item in projectNotice"
                                    :key="`members-item-${item.id}`"
                                    :span="12"
                                >
                                    <a :href="item.href">
                                        <a-avatar
                                            :src="item.logo"
                                            size="small"
                                        />
                                        <span class="member">{{
                                            item.member
                                        }}</span>
                                    </a>
                                </a-col>
                            </a-row>
                        </div>
                    </a-card>
                </a-col>
            </a-row>
        </div>
    </div>
</template>

<script>
import {
    Statistic,
    Row,
    Col,
    Card,
    CardGrid,
    CardMeta,
    List,
    ListItem,
    ListItemMeta,
    Avatar
} from 'ant-design-vue'
import 'ant-design-vue/dist/reset.css'

export default {
    components: {
        AStatistic: Statistic,
        ARow: Row,
        ACol: Col,
        ACard: Card,
        ACardGrid: CardGrid,
        ACardMeta: CardMeta,
        AList: List,
        AListItem: ListItem,
        AListItemMeta: ListItemMeta,
        AAvatar: Avatar
    }
}
</script>


<script setup>
import { Radar } from '@antv/g2plot'
import EditableLinkGroup from './editable-link-group.vue'

defineOptions({
    name: 'DashBoard'
})

const currentUser = {
    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
    name: '吴彦祖',
    userid: '00000001',
    email: 'antdesign@alipay.com',
    signature: '海纳百川，有容乃大',
    title: '交互专家',
    group: 'FluxAdmin-技术部'
}

const projectNotice = [
    {
        id: 'xxx1',
        title: 'Alipay',
        logo: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
        description: '那是一种内在的东西，他们到达不了，也无法触及的',
        updatedAt: '几秒前',
        member: '科学搬砖组',
        href: '',
        memberLink: ''
    },
    {
        id: 'xxx2',
        title: 'Angular',
        logo: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
        description: '希望是一个好东西，也许是最好的，好东西是不会消亡的',
        updatedAt: '6 年前',
        member: '全组都是吴彦祖',
        href: '',
        memberLink: ''
    },
    {
        id: 'xxx3',
        title: 'Ant Design',
        logo: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png',
        description: '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
        updatedAt: '几秒前',
        member: '中二少女团',
        href: '',
        memberLink: ''
    },
    {
        id: 'xxx4',
        title: 'Ant Design Pro',
        logo: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png',
        description: '那时候我只会想自己想要什么，从不想自己拥有什么',
        updatedAt: '6 年前',
        member: '程序员日常',
        href: '',
        memberLink: ''
    },
    {
        id: 'xxx5',
        title: 'Bootstrap',
        logo: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png',
        description: '凛冬将至',
        updatedAt: '6 年前',
        member: '高逼格设计天团',
        href: '',
        memberLink: ''
    },
    {
        id: 'xxx6',
        title: 'React',
        logo: 'https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png',
        description: '生命就像一盒巧克力，结果往往出人意料',
        updatedAt: '6 年前',
        member: '骗你来学计算机',
        href: '',
        memberLink: ''
    }
]

const activities = [
    {
        id: 'trend-1',
        updatedAt: '几秒前',
        user: {
            name: '曲丽丽',
            avatar: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png'
        },
        group: {
            name: '高逼格设计天团',
            link: 'http://github.com/'
        },
        project: {
            name: '六月迭代',
            link: 'http://github.com/'
        },
        template1: '在',
        template2: '新建项目'
    },
    {
        id: 'trend-2',
        updatedAt: '几秒前',
        user: {
            name: '付小小',
            avatar: 'https://gw.alipayobjects.com/zos/rmsportal/cnrhVkzwxjPwAaCfPbdc.png'
        },
        group: {
            name: '高逼格设计天团',
            link: 'http://github.com/'
        },
        project: {
            name: '六月迭代',
            link: 'http://github.com/'
        },
        template1: '在',
        template2: '新建项目'
    },
    {
        id: 'trend-3',
        updatedAt: '几秒前',
        user: {
            name: '林东东',
            avatar: 'https://gw.alipayobjects.com/zos/rmsportal/gaOngJwsRYRaVAuXXcmB.png'
        },
        group: {
            name: '中二少女团',
            link: 'http://github.com/'
        },
        project: {
            name: '六月迭代',
            link: 'http://github.com/'
        },
        template1: '在',
        template2: '新建项目'
    },
    {
        id: 'trend-4',
        updatedAt: '几秒前',
        user: {
            name: '周星星',
            avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WhxKECPNujWoWEFNdnJE.png'
        },
        group: {
            name: '5 月日常迭代',
            link: 'http://github.com/'
        },
        template1: '将',
        template2: '更新至已发布状态'
    },
    {
        id: 'trend-5',
        updatedAt: '几秒前',
        user: {
            name: '朱偏右',
            avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ubnKSIfAJTxIgXOKlciN.png'
        },
        group: {
            name: '工程效能',
            link: 'http://github.com/'
        },
        project: {
            name: '留言',
            link: 'http://github.com/'
        },
        template1: '在',
        template2: '发布了'
    },
    {
        id: 'trend-6',
        updatedAt: '几秒前',
        user: {
            name: '乐哥',
            avatar: 'https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png'
        },
        group: {
            name: '程序员日常',
            link: 'http://github.com/'
        },
        project: {
            name: '品牌迭代',
            link: 'http://github.com/'
        },
        template1: '在',
        template2: '新建项目'
    }
]

const radarContainer = ref()
const radarData = [
    {
        name: '个人',
        label: '引用',
        value: 10
    },
    {
        name: '个人',
        label: '口碑',
        value: 8
    },
    {
        name: '个人',
        label: '产量',
        value: 4
    },
    {
        name: '个人',
        label: '贡献',
        value: 5
    },
    {
        name: '个人',
        label: '热度',
        value: 7
    },
    {
        name: '团队',
        label: '引用',
        value: 3
    },
    {
        name: '团队',
        label: '口碑',
        value: 9
    },
    {
        name: '团队',
        label: '产量',
        value: 6
    },
    {
        name: '团队',
        label: '贡献',
        value: 3
    },
    {
        name: '团队',
        label: '热度',
        value: 1
    },
    {
        name: '部门',
        label: '引用',
        value: 4
    },
    {
        name: '部门',
        label: '口碑',
        value: 1
    },
    {
        name: '部门',
        label: '产量',
        value: 6
    },
    {
        name: '部门',
        label: '贡献',
        value: 5
    },
    {
        name: '部门',
        label: '热度',
        value: 7
    }
]
let radar
onMounted(() => {
    radar = new Radar(radarContainer.value, {
        data: radarData,
        xField: 'label',
        yField: 'value',
        seriesField: 'name',
        point: {
            size: 4
        },
        legend: {
            layout: 'horizontal',
            position: 'bottom'
        }
    })
    radar.render()
})

onBeforeUnmount(() => {
    radar?.destroy?.()
})
</script>

<style scoped lang="less">
.textOverflow() {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
}

// mixins for clearfix
// ------------------------
.clearfix() {
    zoom: 1;
    &::before,
    &::after {
        display: table;
        content: ' ';
    }
    &::after {
        clear: both;
        height: 0;
        font-size: 0;
        visibility: hidden;
    }
}

.activitiesList {
    padding: 0 24px 8px 24px;
    .username {
        color: rgba(0, 0, 0, 0.65);
    }
    .event {
        font-weight: normal;
    }
}

.pageHeaderContent {
    display: flex;
    padding: 12px;
    margin-bottom: 24px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    .avatar {
        flex: 0 1 72px;
        & > span {
            display: block;
            width: 72px;
            height: 72px;
            border-radius: 72px;
        }
    }
    .content {
        position: relative;
        top: 4px;
        flex: 1 1 auto;
        margin-left: 24px;
        color: rgba(0, 0, 0, 0.45);
        line-height: 22px;
        .contentTitle {
            margin-bottom: 12px;
            color: rgba(0, 0, 0, 0.85);
            font-weight: 500;
            font-size: 20px;
            line-height: 28px;
        }
    }
}

.extraContent {
    .clearfix();

    float: right;
    white-space: nowrap;
    .statItem {
        position: relative;
        display: inline-block;
        padding: 0 32px;
        > p:first-child {
            margin-bottom: 4px;
            color: rgba(0, 0, 0, 0.45);
            font-size: 14px;
            line-height: 22px;
        }
        > p {
            margin: 0;
            color: rgba(0, 0, 0, 0.85);
            font-size: 30px;
            line-height: 38px;
            > span {
                color: rgba(0, 0, 0, 0.45);
                font-size: 20px;
            }
        }
        &::after {
            position: absolute;
            top: 8px;
            right: 0;
            width: 1px;
            height: 40px;
            background-color: #e8e8e8;
            content: '';
        }
        &:last-child {
            padding-right: 0;
            &::after {
                display: none;
            }
        }
    }
}

.members {
    a {
        display: block;
        height: 24px;
        margin: 12px 0;
        color: rgba(0, 0, 0, 0.65);
        transition: all 0.3s;
        .textOverflow();
        .member {
            margin-left: 12px;
            font-size: 14px;
            line-height: 24px;
            vertical-align: top;
        }
        &:hover {
            color: #1890ff;
        }
    }
}

.projectList {
    :deep(.ant-card-meta-description) {
        height: 44px;
        overflow: hidden;
        color: rgba(0, 0, 0, 0.45);
        line-height: 22px;
    }
    .cardTitle {
        font-size: 0;
        a {
            display: inline-block;
            height: 24px;
            margin-left: 12px;
            color: rgba(0, 0, 0, 0.85);
            font-size: 14px;
            line-height: 24px;
            vertical-align: top;
            &:hover {
                color: #1890ff;
            }
        }
    }
    .projectGrid {
        width: 33.33%;
    }
    .projectItemContent {
        display: flex;
        flex-basis: 100%;
        height: 20px;
        margin-top: 8px;
        overflow: hidden;
        font-size: 12px;
        line-height: 20px;
        .textOverflow();
        a {
            display: inline-block;
            flex: 1 1 0;
            color: rgba(0, 0, 0, 0.45);
            .textOverflow();
            &:hover {
                color: #1890ff;
            }
        }
        .datetime {
            flex: 0 0 auto;
            float: right;
            color: rgba(0, 0, 0, 0.25);
        }
    }
}

.datetime {
    color: rgba(0, 0, 0, 0.25);
}

@media screen and (max-width: 1200px) and (min-width: 992px) {
    .activeCard {
        margin-bottom: 24px;
    }
    .members {
        margin-bottom: 0;
    }
    .extraContent {
        margin-left: -44px;
        .statItem {
            padding: 0 16px;
        }
    }
}

@media screen and (max-width: 992px) {
    .activeCard {
        margin-bottom: 24px;
    }
    .members {
        margin-bottom: 0;
    }
    .extraContent {
        float: none;
        margin-right: 0;
        .statItem {
            padding: 0 16px;
            text-align: left;
            &::after {
                display: none;
            }
        }
    }
}

@media screen and (max-width: 768px) {
    .extraContent {
        margin-left: -16px;
    }
    .projectList {
        .projectGrid {
            width: 50%;
        }
    }
}

@media screen and (max-width: 576px) {
    .pageHeaderContent {
        display: block;
        .content {
            margin-left: 0;
        }
    }
    .extraContent {
        .statItem {
            float: none;
        }
    }
}

@media screen and (max-width: 480px) {
    .projectList {
        .projectGrid {
            width: 100%;
        }
    }
}
</style>